<template>
  <div class="section">
    <div class="banner">
      <!-- banner -->
      <div class="bannerMain">
        <p class="title" v-if="bannerMainTitle">{{bannerMainTitle}}</p>
        <p class="words" v-if="bannerMainSubTitle">{{bannerMainSubTitle}}</p>
      </div>

      <!-- swiper -->
      <div class="swiper-container">
        <ul class="swiper-wrapper" v-show="bannerIsShow">
            <li class="swiper-slide item" v-for="(item, index) in bannerList" :key="index">
              <a :href="item.Path" :target="item.Target">
                <img :src="item.Banner">
              </a>
            </li>
            <li v-if="bannerList.length > 4 && bannerList.length % 4 !== 0" class="swiper-slide item more"
              v-for="item in fillBanner(bannerList.length)"></li>
        </ul>
        <!-- 分页 -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- 通知 -->
      <div class="indexAnnouncement" v-show='marketAnList.Title'>
        <div class="indexAnnouncementMain">
          <a @click='announcementid_details(marketAnList.Keywords)'>
            <img src="../../../assets/images/index_announcement.png">
            {{marketAnList.Title}}
          </a>
          <span class="more"><router-link to="/news/announcement">{{lang.AnnounceMore}} &gt;&gt;</router-link></span>
        </div>
      </div>
    </div>

    <!-- 交易对市场行情 -->
    <div class="transaction">
      <div class="body">
        <div class="type">
          <ul>
            <li v-for="(item, index) in tradeConfig.VarietyGroupList" :key="item.sort" :class="{'active':typeMenu===item.Name}" @click="swtichMenu(item.Name)">
              <img :src="currencyImgUrl + item.Logo" alt="">
              {{item.Name}}
            </li>
          </ul>
        </div>
        <div class="header">
          <ul class="row">
            <li class="item w10">{{lang['tradingPage head pair']}}</li>
            <li class="item right">{{lang['new price']}}</li>
            <li class="item right">{{lang['24H gains']}}</li>
            <li class="item right">{{lang['24H highest price']}}</li>
            <li class="item right">{{lang['24H lowest price']}}</li>
            <li class="item right" :class="{w220:langKey==='vi'}">{{lang['24H transaction price']}}</li>
          </ul>
        </div>
        <div class="content">
          <div v-for="(el, index) in tradeConfig.VarietyGroupList" :key="el.sort" :class="el.Name" v-show="typeMenu===el.Name">
            <div class="row" v-for="(item, index) in el.TradeVarietyList" :key="index" @click="tradingPage(item.SellerCoinCode+'_'+item.BuyerCoinCode)">
              <div class="item w10">
                <span v-text="item.SellerCoinCode"></span><font> / {{item.BuyerCoinCode}}</font>
              </div>
              <div class="item right">
                <span>{{item.Newest | formatCurrency(item)}}</span>
              </div>
              <div class="item right">
                <span :class="{'green': item.roseVal > 0, 'red': item.roseVal < 0, noChange: item.roseVal === 0}">
                {{item.roseStr}}
              </span>
              </div>
              <div class="item right">
                <span>{{item.High | formatCurrency(item)}}</span>
              </div>
              <div class="item right">
                <span>{{item.Low | formatCurrency(item)}}</span>
              </div>
              <div class="item right" :class="{w220:langKey==='vi'}">
                <span>{{item.Last24TradeQuantity | formatCurrency(item, 'quantity')}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- IDCA联盟 -->
        <div class="idca" v-show="customInfo.Trade || customInfo.Country">
          <h3>
            <img src="../images/idca-small.png" alt="">
             {{lang['Global Alliance Exchange']}}
          </h3>
          <div class="alliance-count" v-show="customInfo.Trade">
            <ul>
              <li>
                <img src="../images/user-count.png" alt=""> <span id="totalUserCount">{{idca.TotalUserCount}}</span>
                <h4>{{lang['Affiliate users']}}</h4>
              </li>
              <li>
                <img src="../images/icon-usd.png" alt=""> <span id="total7DayUSD">{{idca.Total7DayUSD}}</span>
                <h4>{{lang['7 days trading volume']}}</h4>
              </li>
              <li>
                <img src="../images/icon-usd.png" alt=""> <span id="total24HUSD">{{idca.Total24HUSD}}</span>
                <h4>{{lang['24-hour trading volume']}}</h4>
              </li>
            </ul>
          </div>
          <p class="text">
            {{lang['IDCA']}}
            <router-link to="/help/about">{{lang['about53']}} &gt;&gt; </router-link>
          </p>
          <div class="country" v-show="customInfo.Country">
            <ul>
              <li @click="cutoverLanguage('zh-Hant')">
                <img src="../images/hongkong.png" alt=""> {{lang['Hong Kong']}}
              </li>
              <li>
                <a href="https://www.amabix.io" target="_blank">
                  <img src="../images/dubai.png" alt=""> {{lang['Dubai']}}
                </a>
              </li>
              <li>
                <img src="../images/thailand.png" alt=""> {{lang['Thailand']}}
              </li>
              <li @click="cutoverLanguage('zh-Hant')">
                <img src="../images/macao.png" alt=""> {{lang['Macao']}}
              </li>
              <li @click="cutoverLanguage('ja')">
                <img src="../images/japan.png" alt=""> {{lang['Japan']}}
              </li>
              <li @click="cutoverLanguage('fr')">
                <img src="../images/france.png" alt=""> {{lang['France']}}
              </li>
              <li @click="cutoverLanguage('ko')">
                <img src="../images/korean.png" alt=""> {{lang['Korea']}}
              </li>
              <li @click="cutoverLanguage('en')">
                <img src="../images/english.png" alt=""> {{lang['United States']}}
              </li>
              <li>
                <img src="../images/australia.png" alt=""> {{lang['Australia']}}
              </li>
              <li @click="cutoverLanguage('vi')">
                <img src="../images/vietnam.png" alt=""> {{lang['Vietnam']}}
              </li>
              <li>
                <img src="../images/cambodia.png" alt=""> {{lang['Cambodia']}}
              </li>
              <li>
                <img src="../images/norway.png" alt=""> {{lang['Norway']}}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import {mapActions, mapGetters} from 'vuex'
import commonFilter from '@/filters/common.js'
import EventBus from '@/service/EventBus.js'
import Load from '@/utils/Load.js'
import Utils from '@/utils/Utils.js'
import $ from 'jquery'
import Decimal from '@/libs/decimal.min.js'

export default {
  data () {
    return {
      typeMenu: '',
      isAnnouncement: false,

      bannerIsShow: false,
      banner: null,
      bannerList: [],
      bannerTitle: {},

      VHKD: [],
      USD: [],
      BTC: [],
      ETH: [],
      pairs: [],
      tradeConfig: {},
      colStyles: {
        pair: {
          width: '36%'
        },
        price: {
          width: '30%',
          'text-align': 'right',
          'margin-right': '17%'
        },
        change: {
          width: '20%',
          'text-align': 'right'
        }
      },

      // IDC联盟实时数据
      currentAjax: false,
      time: null,
      idca: {
        TotalUserCount: 0,
        Total24HUSD: 0,
        Total24HBTC: 0,
        Total7DayUSD: 0,
        Total7DayBTC: 0
      },
      isActivity: false,
      ServerTimeStamp: '',
      StartTimeStamp: '',
      EndTimeStamp: ''
    }
  },
  filters: {
    ...commonFilter,
    formatCurrency (value, item, type) {
      let precision = item.buyerPrecision
      type === 'quantity' && (precision = 2)
      return commonFilter.currency(commonFilter.fillDecimal(new Decimal(parseFloat(value) || 0).toFixed(10), precision), 'USD', '', precision)
    }
  },
  watch: {
    langKey () {
      this.swiperItem()
    }
  },
  props: ['lang', 'marketAnList'],
  computed: {
    ...mapGetters({
      langKey: 'langKey',
      mixUserInfo: 'userInfo',
      customInfo: 'customInfo'
    }),
    bannerMainTitle: function () {
      switch(this.langKey) {
        case 'en':
          return this.bannerTitle.English
          break
        case 'fr':
          return this.bannerTitle.French
          break
        case 'ja':
          return this.bannerTitle.Japanese
          break
        case 'ko':
          return this.bannerTitle.Korean
          break
        case 'nl':
          return this.bannerTitle.Nederlands
          break
        case 'vi':
          return this.bannerTitle.Vietnamese
          break
        case 'zh-Hant':
          return this.bannerTitle.ChineseHant
          break
        default:
          return this.bannerTitle.Chinese
      }
    },
    bannerMainSubTitle: function () {
      switch(this.langKey) {
        case 'en':
          return this.bannerTitle.EnglishTitle
          break
        case 'fr':
          return this.bannerTitle.FrenchTitle
          break
        case 'ja':
          return this.bannerTitle.JapaneseTitle
          break
        case 'ko':
          return this.bannerTitle.KoreanTitle
          break
        case 'nl':
          return this.bannerTitle.NederlandsTitle
          break
        case 'vi':
          return this.bannerTitle.VietnameseTitle
          break
        case 'zh-Hant':
          return this.bannerTitle.ChineseHantTitle
          break
        default:
          return this.bannerTitle.ChineseTitle
      }
    }
  },
  methods: {
    ...mapActions([ 'switchLang' ]),
    // 获取banner主副标题
    getBannerTitle () {
      this.$http.get('InfoSetting/Get', {}, {
        isQueryString: true
      })
      .then((res) => {
        if (res) {
          this.bannerTitle = (res.Data && res.Data[0]) || {}
        }
      })
    },
    tradingPage (pair) {
      Utils.LS.set('tradingPair', pair)
      this.$router.push({name: 'trading', query: {pair: pair}})
    },
    cutoverLanguage (key) {
      this.switchLang(key)
    },
    swtichMenu (menu) {
      this.typeMenu = menu
    },
    announcementid_details (keywords) {
      this.$router.push({
        path: '/news/announcement_details',
        query: {
          keywords: keywords
        }
      })
    },
    getPair () {
      let self = this
      // 获取交易对数据
      this.$http.post('Trade/GetTradeConfig').then((res) => {
        if (res.StatusCode === '200') {
          self.tradeConfig = res.Data || []

          let _pairs_ = []
          for (var i = 0; i < self.tradeConfig.VarietyGroupList.length; i++) {
            let _data_ = self.tradeConfig.VarietyGroupList[i].TradeVarietyList
            for (let j = 0; j < _data_.length; j++) {
              _pairs_.push(_data_[j])
            }
            this.setRoseWithArray(_data_) // 统一格式化rose

            // 后台会输出0.00000001为1e-8，要用第三库转
            this.setPrecisionWithArray(_pairs_, 'MinSellerCoinPrecision', 'sellerPrecision')
            this.setPrecisionWithArray(_pairs_, 'MinBuyerCoinPrecision', 'buyerPrecision')
          }

          self.pairs = _pairs_

          let varietyGroup = this.tradeConfig.VarietyGroupList
          if (varietyGroup.length > 0) {
            self.typeMenu = varietyGroup[0].Name
          }

          self.tradeConfig.TradeVarietyList.forEach((item) => {
            self[item.BuyerCoinCode] && self[item.BuyerCoinCode].push(item)
          })

          this.initRealtimePush()
        }
      })
    },
    getPairsByBuyer (buyer) {
      return this.tradeConfig.TradeVarietyList.filter((item) => {
        return item.BuyerCoinCode === buyer
      })
    },
    initRealtimePush () {
      let params = this.tradeConfig
      let api = params.Signalr + '/signalr/hubs'
      let js = params.Signalr + '/signalr/js'
      global.openResult = false

      Load(js, () => {
        let MarriedDealHub = $.connection.ExchangesHub
        $.connection.hub.stop()
        $.connection.hub.error((error) => {
          // console.log('SignalR error: ' + error)
        })
        $.connection.hub.connectionSlow(() => {
          // console.log('connectionSlow')
        })
        $.connection.hub.reconnecting(() => {
          // console.log('reconnecting')
        })

        // 交易对信息更新
        MarriedDealHub.client.RealTrendCallback = (result) => {
          global.openResult && console.log('首页的交易对信息推送RealTrendCallback')
          this.updatePairsByPush(result)
        }

        $.connection.hub.url = api
        $.connection.hub.logging = true
        $.connection.hub.qs = 'UserID=&GroupID='
        $.connection.hub.start({ transport: 'auto' }).done((res) => {

        }).fail((res) => {

        })
      })
    },
    updatePairsByPush (newPairs) {
      for (let i = 0; i < newPairs.length; i++) {
        for (let j = 0; j < this.pairs.length; j++) {
          if (newPairs[i].TradingConfigID === this.pairs[j].TradingConfigID) {
            this.pairs[j].Newest = newPairs[i].Newest
            this.pairs[j].Rose = newPairs[i].Rose
            this.pairs[j].Rise = newPairs[i].Rise
            this.pairs[j].High = newPairs[i].Highest
            this.pairs[j].Low = newPairs[i].Low
            this.pairs[j].Last24TradeQuantity = newPairs[i].Last24TradeQuantity
          }
        }
      }
      this.setRoseWithArray(this.pairs) // 统一格式化rose
    },
    // 格式化Rose即涨幅的符号、百分比%和涨跌量
    setRose (item) {
      let rose
      let sign
      rose = new Decimal(item.Rose || 0)
      rose = parseFloat(rose.mul(100).toFixed(2)) // fillDecimal是补0
      rose > 0 && (sign = '+')
      rose < 0 && (sign = '-')
      rose === 0 && (sign = '')
      return {
        sign,
        rose,
        str: sign + commonFilter.fillDecimal(rose, 2).replace('-', '') + '%' // fillDecimal是补0
      }
    },
    setRoseWithArray (arr = []) {
      let roseParams
      arr.forEach((item, index) => {
        roseParams = this.setRose(item)
        item.roseVal = roseParams.rose
        item.roseSign = roseParams.sign
        item.roseStr = roseParams.str
        // this.$set(arr, index, item)
      })
    },
    addPairKey () {
      // 增加key value方便查找
      this.pairs.forEach((v) => {
        Object.defineProperty(this.pairs, v.TradingConfigID, {
          Enumerable: false,
          value: v
        })
      })
    },
    setPrecisionWithArray (list = [], key, name) {
      list.forEach((item) => {
        // 防-1e8
        let prec = new Decimal(item[key])
        prec = prec.toFixed()
        prec = prec.toString().split('.')[1].length || 2
        item[name] = prec
      })
    },
    // banner 活动图
    swiperItem () {
      let self = this
      self.banner && self.banner.destroy(false)
      self.bannerIsShow = false
      self.$http.post('SubBanner/GetList', {
        'language-code': self.langKey
      }, {}).then((res) => {
        if (res.StatusCode === '200') {
          self.bannerList = res.Data || []
          setTimeout(function () {
            self.bannerIsShow = true
            self.banner = new Swiper('.swiper-container', {
              loop: false,
              slidesPerView: 4,
              slidesPerGroup: 4,
              spaceBetween: '4%',
              lazyLoading: true,
              paginationClickable: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              },
              breakpoints: {
                // 当宽度小于等于1200
                1200: {
                  slidesPerView: 1,
                  slidesPerGroup: 1,
                  spaceBetween: 0
                }
              }
            }),
            $('.swiper-pagination-bullet').hover(function () {
              $(this).trigger('click')
            })
          }, 100)
        }
      })
    },
    fillBanner (len) {
      let count = 4 - (len % 4)
      let arr = []
      for (var i = 0; i < count; i++) {
        arr.push(i)
      }
      return arr
    },
    dateParse (dateString) {
      let SEPARATOR_BAR = '-'
      let SEPARATOR_SLASH = '/'
      let SEPARATOR_DOT = '.'
      let dateArray
      if (dateString.indexOf(SEPARATOR_BAR) > -1) {
        dateArray = dateString.split(SEPARATOR_BAR)
      } else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
        dateArray = dateString.split(SEPARATOR_SLASH)
      } else {
        dateArray = dateString.split(SEPARATOR_DOT)
      }
      return new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
    },
    /**
     * 日期比较大小
     * compareDateString大于dateString，返回1；
     * 等于返回0；
     * compareDateString小于dateString，返回-1
     * @param dateString 日期
     * @param compareDateString 比较的日期
     */
    dateCompare (dateString, compareDateString) {
      var dateTime = this.dateParse(dateString).getTime()
      var compareDateTime = this.dateParse(compareDateString).getTime()
      if (compareDateTime > dateTime) {
        return 1
      } else if (compareDateTime === dateTime) {
        return 0
      } else {
        return -1
      }
    },
    /**
     * 判断日期是否在区间内，在区间内返回true，否返回false
     * @param dateString 日期字符串
     * @param startDateString 区间开始日期字符串
     * @param endDateString 区间结束日期字符串
     * @returns {Number}
     */
    isDateBetween (dateString, startDateString, endDateString) {
      var flag = false
      var startFlag = (this.dateCompare(dateString, startDateString) < 1)
      var endFlag = (this.dateCompare(dateString, endDateString) > -1)
      if (startFlag && endFlag) {
        flag = true
      }
      return flag
    },
    // idc联盟实时数据
    timingRequest () {
      let self = this
      let totalUserCount = $('#totalUserCount').numberAnimate({el: 'totalUserCount', speed: 500, num: self.idca.TotalUserCount, symbol: ','})
      let total7DayUSD = $('#total7DayUSD').numberAnimate({el: 'total7DayUSD', speed: 500, num: self.idca.TotalUserCount, symbol: ','})
      let total24HUSD = $('#total24HUSD').numberAnimate({el: 'total24HUSD', speed: 500, num: self.idca.TotalUserCount, symbol: ','})
      self.getRealStatisticData(totalUserCount, total7DayUSD, total24HUSD)

      var cycle = 1 * 1000
      /* if (self.StartTimeStamp <= self.ServerTimeStamp <= self.EndTimeStamp) {
        cycle = 3000
      } */
      self.time = window.setInterval(function () { self.getRealStatisticData(totalUserCount, total7DayUSD, total24HUSD) }, cycle)
    },
    getRealStatisticData (totalUserCount, total7DayUSD, total24HUSD) {
      let self = this
      if (self.currentAjax) return
      self.currentAjax = true
      self.$http.get('RealStatistic/GetRealStatisticData', {}, {
        isQueryString: true
      }).then((res) => {
        self.currentAjax = false
        if (res.StatusCode === '200') {
          let data = res.Data || []
          // 因后台接口有缓存，导致数据出现回退现象 (a < b)
          // 只有 a > b 时才执行数据变化&处理翻页动画
          if (data.TotalUserCount > self.idca.TotalUserCount) {
            self.idca.TotalUserCount = data.TotalUserCount
            totalUserCount.resetData(self.idca.TotalUserCount)
          }

          self.idca.Total24HUSD = data.Total24HUSD
          total24HUSD.resetData(self.idca.Total24HUSD)

          self.idca.Total7DayUSD = data.Total7DayUSD
          total7DayUSD.resetData(self.idca.Total7DayUSD)

          self.idca.Total24HBTC = data.Total24HBTC
          self.idca.Total7DayBTC = data.Total7DayBTC
        }
      })
    },
    // 关闭活动弹窗
    closeActivity () {
      this.isActivity = false
      Utils.LS.set('isActivity_' + this.langKey, 'false')
    },
    toActivity () {
      this.closeActivity()
      window.open(window.location.origin + '/promo/giveaway')
    }
  },
  created () {
    EventBus.$on('annLoad', () => {
    })
  },
  mounted () {
    this.getBannerTitle()
    this.swiperItem()
    this.timingRequest()
    this.getPair()
  },
  beforeDestroy () {
    EventBus.$off('annLoad')

    // 停止刷新IDC联盟数据
    window.clearInterval(this.time)

    // $.connection.hub.stop() // 停止推送
  }
}
</script>
<style lang="less">
@import url('swiper/dist/css/swiper.min.css');
.homePage {
  .section {
    width: 100%;
    min-width: 1200px;
  }

  .swiper-container {
    width: 1200px;
    position: absolute;
    top: 230px;
    left: 50%;
    height: 140px;
    transform: translateX(-50%);
    margin: 20px auto;
    padding: 30px 0;

    .item {
      text-align: center;
      img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
      }
    }

    .swiper-pagination {
      bottom: 0;
      text-align: right;

      .swiper-pagination-bullet {
        width: 12px;
        height: 6px;
        border-radius: 6px;
        background-color: #9ca7bc;
        opacity: 0.6;
        cursor: pointer;
        transition: all 0.4s ease;
      }

      .swiper-pagination-bullet:hover {
        border-radius: 10px;
        width: 25px;
        height: 6px;
        background-color: white;
        transition: all 0.4s ease;
      }

      .swiper-pagination-bullet-active {
        border-radius: 10px;
        width: 25px;
        height: 6px;
        background-color: white;
        opacity: 1;
      }
    }
  }

  .section .banner {
    width: 100%;
    position: relative;
    display: block;
    background: #000 url(./../images/banner.png) no-repeat center bottom;
    background-size: cover;
    overflow: hidden;
    height: 525px;

    .indexAnnouncement {
      position: absolute;
      height: 50px;
      line-height: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: left;
      color: #fff;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .indexAnnouncementMain {
      width: 1200px;
      margin: 0 auto;
      position: relative;
    }

    .indexAnnouncement img {
      vertical-align: middle;
      padding-right: 5px;
    }

    .indexAnnouncement span {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0;
      cursor: pointer;
    }

    .more {
      a {
        color: #fff;
      }
    }
  }

  .banner .bannerMain {
    position: absolute;
    width: 1200px;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .banner .bannerMain .title {
    font-size: 40px;
    font-weight: 300;
    color: #fff;
  }

  .banner .bannerMain .words {
    font-size: 26px;
    color: #eee;
    line-height: 80px;
  }

  .banner .bannerMain .words2 a {
    display: inline-block;
    width: 228px;
    height: 46px;
    line-height: 46px;
    margin:0 29px;
    border-radius: 8px;
    border: solid 1px rgba(255, 255, 255, 0.7);
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
  }

  .banner .bannerMain .words2 a:last-child {
    background: rgba(255, 255, 255, 0.7);
    border:none;
    color: #13245b;
  }

  /* 交易对推送 */
  .transaction {
    width: 100%;
    padding: 30px 0;
    background-color: #101e36;

    .body {
      width: 1200px;
      margin: 0 auto;
    }

    .type {
      width: 100%;
      ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        li {
          padding: 16px 44px;
          text-align: center;
          font-size: 16px;
          color: #cfd3d9;
          border-top: 1px solid #43597d;
          border-right: 1px solid #43597d;
          background-color: #101e36;
          cursor: pointer;
          img {
            margin-top: -4px;
            vertical-align: middle;
            width: 16px;
            height: 16px;
          }
        }

        li:first-child {
          border-left: 1px solid #43597d;
          border-radius: 4px 0 0 0;
        }

        li:last-child {
          border-radius: 0 4px 0 0;
        }

        .active {
          background-color: #273e67;
          color: white;
          border-bottom: 1px solid #273e67;
          margin-bottom: -1px;
        }
      }
    }

    .header {
      border: 1px solid #43597d;
      .row {
        display: flex;
        flex-direction: row;
        background-color: #273e67;

        .item {
          width: 18%;
          height: 40px;
          line-height: 40px;
          text-align: left;
          text-indent: 30px;
          color: #cfd3d9;
          padding: 0 15px;
          box-sizing: border-box;
        }

        .item:first-child {
          text-indent: 10px;
        }

        .item:last-child {
          text-indent: 0;
          padding-right: 20px;
        }

        .right {
          text-align: right;
        }

        .w10 {
          width: 10%;
        }

        .w220 {
          width: 220px;
          flex: none;
        }
      }
    }

    .content {
      .row {
        display: flex;
        flex-direction: row;
        background-color: #142440;
        border: 1px solid #43597d;
        border-top: 0;
        cursor: pointer;

        .item {
          width: 18%;
          height: 60px;
          line-height: 60px;
          text-align: left;
          color: #cfd3d9;
          text-indent: 30px;
          padding: 0 15px;
          box-sizing: border-box;

          font {
            color: #7F8EAA;
            font-size: 12px;
          }

          .btn {
            background-color: #3782ff;
            padding: 8px 25px;
            border-radius: 4px;
            color: white;
            cursor: pointer;
          }
        }

        .item:first-child {
          text-indent: 10px;
        }

        .item:last-child {
          padding-right: 20px;
        }

        .right {
          text-align: right;
        }

        .w10 {
          width: 10%;
        }

        .w220 {
          width: 220px;
          flex: none;
        }
      }
      .row:hover {
        background-color: rgb(57, 89, 149);
      }
    }

    .idca {
      text-align: center;
      color: white;
      padding: 20px 0;
      h3 {
        font-size: 24px;
        margin: 30px 0;
        img {
          vertical-align: middle;
          margin-top: -4px;
        }
      }

      .mt-number-animate{
        line-height: 24px;
        height: 24px;
        overflow: hidden;
        display: inline-block;
        position: relative;
      }

      .mt-number-animate .mt-number-animate-dot{
        line-height: 24px;
        float: left;
        text-align: center;
      }

      .mt-number-animate .mt-number-animate-dom{
        width: 20px;
        text-align: center;
        float: left;
        position: relative;
        top: 0;
      }

      .mt-number-animate .mt-number-animate-dom .mt-number-animate-span{
        width: 100%;
        float: left;
      }

      .alliance-count {
        margin: 30px 0;
        ul {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          li {
            flex: 1;
            padding: 30px 20px;
            margin-right: 30px;
            text-align: center;
            border-radius: 4px;
            font-size: 30px;
            background: rgba(38, 59, 93, 0.5) url('../images/idca-cover.png') no-repeat center;
            background-size: cover;
            span {
              line-height: 24px;
            }
            img {
              vertical-align: middle;
              margin-top: -8px;
            }
            h4 {
              margin-top: 22px;
              font-size: 16px;
            }
          }

          li:last-child {
            margin-right: 0;
          }
        }
      }

      .text {
        text-align: left;
        font-size: 14px;
        color: #a4abb9;
        line-height: 30px;
        a {
          color: #999;
        }

        a:hover {
          color: #3782FF;
        }
      }

      .country {
        width: 1200px;
        margin: 20px auto 0;
        ul {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
          padding-left: 8.33%;

          li {
            width: 16.66%;
            text-align: left;
            margin: 10px 0;
            cursor: pointer;
            a {
              color: white;
            }

            img {
              width: 24px;
              vertical-align: middle;
              margin-top: -2px;
            }
          }
        }
      }
    }
  }

  .marketBar { height:85px; overflow:hidden; background:rgba(0,0,0,0.35); position:relative;  width:100% ;text-align: center;margin-top: -85px;}
  .marketBar ul { width: 1200px; margin: 0 auto; height: 85px;}
  .marketBar ul li {display: inline-block; width:20%; text-align: center; float: left; }
  .marketBar ul li img { vertical-align: middle; display: inline-block; margin-right: 10px; width: 30px;}
  .marketBar ul li span { color:#fff; font-weight: 500; display: inline-block; height: 85px; line-height: 85px;  font-size: 14px; padding-right: 5px }
  .marketBar ul li a{ display: block; }
  .marketBar ul li .green { color: #0dbb36;}
  .marketBar ul li .red { color: #cf1c1c;}
  .marketBar ul li:first-child { text-align: left;}
  .marketBar ul li:last-child { text-align: right;}

  .market { width: 100%; height: 180px; background:#101e36; overflow:hidden;}
  .market .body { width: 1200px;height: 180px;  margin: 0 auto; color: #3782FF;}
  .market .block { float: left;}

  .market .block:nth-of-type(1) {
    width:36%;
    .titles span:nth-of-type(1) {width:10%;}
    .titles span:nth-of-type(2) {width:45%;}
    .titles span:nth-of-type(3) {width:45%;}
    .item a:nth-of-type(1) {width:10%;}
    .item span {width:45%;}
  }
  .market .block:nth-of-type(2) { width:25%; margin-left:7%;}
  .market .block:nth-of-type(3) { width:25%; margin-left:7%;}
  .market .titles { font-size: 16px;}
  .market .titles span { width: 33.333%; float: left; padding-top: 22px;}
  .market .titles span:nth-of-type(2), .market .titles span:nth-of-type(3) { text-align: right;}
  .market .item a, .market .item span { float: left;padding-top:16px;width: 33.333%;color: #fff; }
  .market .item span { text-align: right;}
  .red { color: #b82228 !important; }
  .green { color: #0dbb36 !important;}
}

/*== 800px ==*/
@media only screen and (max-width: 1200px) {

}
</style>
